<template>
    <div class="smart_container_rightBlock smart_browser">
        <TopNav @changeLangEvent='changeLangEvent'/>
        <div class="smart_container_rightBlock_scroll">
            <!-- <div class="smart_container_rightBlock_title">
                {{$setI18n('lang_br_overview','概览')}}
            </div> -->
            <div class="smart_hash_list">
                <div class="smart_hash_list_lis smart_nav_bg1" >
                    <div class="smart_hash_list_lisLeft">
                        <span class="ks">{{ topList.globalHashRate }}</span>
                        <span class="hash">{{$setI18n('lang_br_calculationPower','哈希算力')}}</span>
                        <!-- <span class="bf"><i class="point"></i>{{ topList.globalHashRate }}</span> -->
                    </div>
                </div>

                <div class="smart_hash_list_lis smart_nav_bg2">
                    <div class="smart_hash_list_lisLeft">
                        <span class="ks">{{ topList.globalDifficulty && Math.floor(parseFloat(topList.globalDifficulty)*100000000)/100000000 }}</span>
                        <span class="hash">{{$setI18n('lang_br_Whole_network_difficulty','全网难度')}}</span>
                    </div>
                </div>
                <!-- && parseFloat(topList.globalDifficulty).toFixed(8)  -->
                <!-- <span class="bf"><i class="point"></i>{{ topList.globalDifficultyPer }}</span> -->
                <div class="smart_hash_list_lis smart_nav_bg3">
                    <div class="smart_hash_list_lisLeft">
                        <span class="ks">{{ topList.currentBlockHeight }}</span>
                        <span class="hash">{{$setI18n('lang_br_Whole_network_heigh','全网高度')}}</span>
                        <!-- <span class="bf"><i class="point"></i>{{ topList.globalDifficultyPer }}</span> -->
                    </div>
                </div>
                <div class="smart_hash_list_lis smart_nav_bg4">
                    <div class="smart_hash_list_lisLeft">
                        <span class="ks">{{ currentBlock || topList.currentBlockHeight }}</span>
                        <span class="hash">{{$setI18n('lang_br_current_block','当前主块')}}</span>
                        <!-- <span class="bf"><i class="point"></i>{{ topList.globalDifficultyPer }}</span> -->
                    </div>
                </div>
            </div>

            <div class="smart_hash_list1">
                <div class="smart_hash_list_lis smart_nav_bg22">
                    <div class="smart_hash_list_lisLeft">
                        <span class="ks">{{ topList.globalDifficulty && parseFloat(topList.globalDifficulty) }}</span>
                        <span class="hash">{{$setI18n('lang_br_Whole_network_difficulty','全网难度')}}</span>
                    </div>
                </div>
            </div>

            <div class="smart_block_clearFix">
                <div class="smart_searchBlock smart_qkMessageBlock_right_block">
                    <div class="smart_searchBlock_border">
                        <div class="search_label">{{$setI18n('lang_br_search_label','查询地址，合约，交易块哈希，主块哈希，主节点ID等')}}  </div>
                        <div class="smart_searchBlock_rightText">
                            <input type="text"
                                   :placeholder="$setI18n('lang_br_search_label','请输入交易记录或需要查询的地址')"
                                   v-model.trim="addressParms"/>
                            <div class="searchButton" @click="handleSearch"></div>
                        </div>

                    </div>
                    <div class="smart_searchBlock_border_phone">
                        <div class="smart_searchBlock_rightText">
                            <input type="text"
                                   :placeholder="$setI18n('lang_br_search_label','请输入交易记录或需要查询的地址')"
                                   v-model.trim="addressParms"/>
                            <div class="searchButton" @click="handleSearch"></div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- <div class="smart_container_qkMessageBlock" >
              <div class="left">
                <span class="label">{{$setI18n('lang_br_calculationPower','哈希算力')}}</span>
                <span class="cont">{{topList.globalHashRate}}</span>
              </div>
            </div> -->


            <div class="search_hash" v-if="isShowJyTable">
                <div class="flex">
                    <span class="label">{{$setI18n('lang_br_hash','哈希值')}}</span>
                    <span class="cont">{{addressParms}}</span>
                </div>
            </div>

            <div class="search_hash_phone" v-if="isShowJyTable">
                <div class="flex">
                    <span class="label">{{$setI18n('lang_br_hash','哈希值')}}</span>
                    <span class="cont">{{addressParms && addressParms.substring(0,30) + '...'}}</span>
                </div>
            </div>

            <div class="max_width1">

                <div class="smart_qkMessageBlock_left smart_qkMessageBlock_left_block">{{$setI18n('lang_br_overview','概览')}}</div>
            </div>
            <div class="smart_container_qkMessageBlock11">
                <div class="left">
                    <div class="smart_container_tableList" >
                        <div class="smart_container_dz_table" >
                            <!-- smart_main类型 -->
                            <!-- 主块信息 -->
                            <div class="smart_main" >
                                <!-- <div>主块信息</div> -->
                                <div class="main_flex" >
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_calculationPower','哈希算力')}}</span>
                                        <span class="cont orange">{{ topList.globalHashRate }}</span>
                                    </div>
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_heigh','全网高度')}}</span>
                                        <span class="gray cont orange">{{ topList.currentBlockHeight }}</span>
                                    </div>
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_curblock','当前主块')}}</span>
                                        <span class="cont orange">{{ currentBlock || topList.currentBlockHeight }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="max_width" v-if="money && isShowDzTable">
                <div class="amount_bg">
                    <div class="amount">{{money}} <span> SAT</span></div>
                    <div class="amount_info"> {{ $setI18n('lang_br_allBalanse', '账户余额')}}</div>
                </div>
            </div>

            <div class="max_width">
                <div v-if="isSmartxMain==true" class="smart_qkMessageBlock_left smart_qkMessageBlock_left_block">{{ $setI18n('lang_br_mainBlockInfo', '主块信息')}}</div>
                <div v-else class="smart_qkMessageBlock_left smart_qkMessageBlock_left_block" v-text="titleBar"></div>
            </div>

            <div class="smart_container_qkMessageBlock">
                <div class="left">
                    <div class="smart_container_tableList  smart_tableForAdress" v-if="isShowDzTable">
                        <Tabs value="name1" v-if="accountTransactionsList" @on-click="changeTabs">
                            <TabPane :label="$setI18n('lang_br_transactionNormal', '普通交易')" name="name1">
                                <Table :row-class-name="rowClassName" :columns="columns2" :data="accountTransactionsList">
                                    <template slot-scope="{ row }" slot="hash">
                                        <div @click="selected(row)">
                                            <Tooltip max-width="300" :transfer="true" :content="row.hash">
                                                {{row.hash && row.hash.substring(0,39) + '...'}}
                                            </Tooltip>
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="amount">
                                        <div>
                                            {{row.amount ? (row.amount/exchangeRateRatio): 0}} SAT
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="type">
                                        <div v-if="row.addressOut">
                                            <Button type="info" v-if="row.addressIn !==  addressParms ">
                                                {{$setI18n('lang_br_from', '转出')}}</Button>
                                            <Button type="warning" v-if="row.addressIn ==  addressParms ">
                                                {{$setI18n('lang_br_to', '转入')}}
                                            </Button>
                                        </div>
                                        <div v-else>
                                            <Button type="success">
                                                {{$setI18n('lang_br_create', '创建代币')}}</Button>
                                        </div>
                                    </template>
                                </Table>
                            </TabPane>
                            <TabPane :label="$setI18n('lang_br_transactionPrivite', '代币交易')" name="name2">
                                <Table class="pcshow" :row-class-name="rowClassName" :columns="columns3" :data="accountList">
                                    <template slot-scope="{ row }" slot="hash">
                                        <div @click="selected(row)">
                                            <Tooltip max-width="300" :transfer="true" :content="row.hash">
                                                {{row.hash && row.hash.substring(0,39) + '...'}}
                                            </Tooltip>
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="amount">
                                        <div>
                                            {{row.data &&  row.data.substring(row.data.indexOf('(') + 2,row.data.indexOf(')') - 1).split(',')[row.data.substring(row.data.indexOf('(') + 2,row.data.indexOf(')') - 1).split(',').length-1].substring(1)}}
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="name">
                                        <div>
                                            {{row.temp && row.temp[0]}}
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="type">
                                        <div v-if="row.addressOut">
                                            <Button type="info" v-if="row.addressIn !==  addressParms ">
                                                {{$setI18n('lang_br_from', '转出')}}</Button>
                                            <Button type="warning" v-if="row.addressIn ==  addressParms ">
                                                {{$setI18n('lang_br_to', '转入')}}
                                            </Button>
                                        </div>
                                        <div v-else>
                                            <Button type="success">
                                                {{$setI18n('lang_br_create', '创建代币')}}</Button>
                                        </div>

                                    </template>
                                </Table>
                                <Table class="phoneshow" :row-class-name="rowClassName" :columns="columns3_phone" :data="accountList">
                                    <template slot-scope="{ row }" slot="hash">
                                        <div @click="selected(row)">
                                            <Tooltip max-width="300" :transfer="true" :content="row.hash">
                                                {{row.hash && row.hash.substring(0,39) + '...'}}
                                            </Tooltip>
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="amount">
                                        <div>
                                            {{row.data &&  row.data.replace(" ","").substring(row.data.indexOf('(') + 2,row.data.indexOf(')') - 1).split(',')[row.data.substring(row.data.indexOf('(') + 2,row.data.indexOf(')') - 1).split(',').length-1].substring(1)}}
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="name">
                                        <div>
                                            {{row.temp && row.temp[0]}}
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="type">
                                        <div v-if="row.addressOut">
                                            <Button type="warning" v-if="row.addressIn !==  addressParms ">
                                                {{$setI18n('lang_br_to', '转入')}}</Button>
                                            <Button type="info" v-if="row.addressIn ==  addressParms ">
                                                {{$setI18n('lang_br_from', '转出')}}
                                            </Button>
                                        </div>
                                        <div v-else>
                                            <Button type="success">
                                                {{$setI18n('lang_br_create', '创建代币')}}</Button>
                                        </div>

                                    </template>
                                </Table>
                            </TabPane>
                        </Tabs>

                    </div>
                    <div class="smart_container_tableList" v-if="isShowJyTable">
                        <div class="smart_container_dz_table" >
                            <!-- smart_main类型 -->
                            <!-- 主块信息 -->
                            <div class="smart_main" v-if="isSmartxMain == true">
                                <!-- <div>主块信息</div> -->
                                <div class="main_flex" >
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_blockHeigh','块高度')}}</span>
                                        <span class="gray cont orange">{{ accountTransactionsDetail.height }}</span>
                                    </div>
                                    <!-- <div class="flex">
                                      <span class="label">{{$setI18n('lang_br_Whole_network_difficulty','全网难度')}}</span>
                                      <span class="gray cont">{{ accountTransactionsDetail.difficulty }}</span>
                                    </div> -->

                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_Weights','权重值')}}</span>
                                        <span class="cont">{{accountTransactionsDetail.linkstran && Object.values(accountTransactionsDetail.linkstran).length}}</span>
                                    </div>

                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_gg','矿工')}}</span>
                                        <span class="gray cont orange smart_container_pc" v-clipboard:copy="accountTransactionsDetail.Address" v-clipboard:success="onCopySuccess" >{{ accountTransactionsDetail.Address}}</span>
                                        <span class="gray cont orange smart_container_tableList_phone" v-clipboard:copy="accountTransactionsDetail.Address" v-clipboard:success="onCopySuccess" >{{ accountTransactionsDetail.Address && accountTransactionsDetail.Address.substring(0,20) + '...' }}</span>
                                    </div>

                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_Numberofverificationnodes','验证节点数')}}</span>
                                        <span class="cont">{{accountTransactionsDetail.linksblk && Object.values(accountTransactionsDetail.linksblk).length}}</span>
                                    </div>

                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_sjs','随机数')}}</span>
                                        <span class="gray cont">{{ accountTransactionsDetail.random }}</span>
                                    </div>
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_time','时间')}}</span>
                                        <span class="cont">{{ formatTime(accountTransactionsDetail.timestamp,'YYYY-MM-dd hh:ss:mm') }}</span>
                                    </div>


                                </div>


                            </div>

                            <!-- smart_txs类型 -->
                            <div class="smart_main" v-if="isSmartxMain == false">
                                <!-- <div>交易信息</div> -->
                                <div class="main_flex" v-if="accountTransactionsDetail">
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_hash','交易哈希')}}</span>
                                        <span class="cont orange smart_container_pc">{{ accountTransactionsDetail.hash }}</span>
                                        <span class="cont smart_container_tableList_phone">{{ accountTransactionsDetail.hash && accountTransactionsDetail.hash.substring(0,20) + '...' }}</span>
                                    </div>
                                    <div class="flex gray">
                                        <span class="label">{{$setI18n('lang_br_fromer','转入方')}}</span>
                                        <span class="cont smart_container_pc">{{ accountTransactionsDetail.addressIn}}</span>
                                        <span class="cont smart_container_tableList_phone">{{ accountTransactionsDetail.addressIn && accountTransactionsDetail.addressIn.substring(0,20) + '...' }}</span>
                                    </div>
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_toer','转出方')}}</span>
                                        <span class="cont smart_container_pc">{{ accountTransactionsDetail.addressOut}}</span>
                                        <span class="cont smart_container_tableList_phone">{{ accountTransactionsDetail.addressOut && accountTransactionsDetail.addressOut.substring(0,20) + '...' }}</span>
                                    </div>
                                    <div class="flex gray" >
                                        <span class="label">{{$setI18n('lang_value','金额')}}</span>
                                        <span class="cont orange" v-if="accountTransactionsDetail.type !='contract'">{{ accountTransactionsDetail.amount }} SAT</span>
                                        <span class="cont orange" v-else>{{accountTransactionsDetail.data &&  accountTransactionsDetail.data.substring(accountTransactionsDetail.data.indexOf('(') + 2,accountTransactionsDetail.data.indexOf(')') - 1).split(',')[accountTransactionsDetail.data.substring(accountTransactionsDetail.data.indexOf('(') + 2,accountTransactionsDetail.data.indexOf(')') - 1).split(',').length-1].substring(1)}} {{accountTransactionsDetail.temp && accountTransactionsDetail.temp[0]}}</span>

                                    </div>
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_time','时间')}}</span>
                                        <span class="cont">{{ formatTime(accountTransactionsDetail.timestamp,'YYYY-MM-dd hh:ss:mm') }}</span>
                                    </div>
                                    <div class="flex gray">
                                        <span class="label">{{$setI18n('lang_br_blockHeigh','块高度')}}</span>
                                        <span class="cont">{{ accountTransactionsDetail.height }}</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- 默认展示 -->
                    <div class="smart_container_tableList smart_container_pc" v-if="isShowDefalutTable">
                        <div class="smart_container_dz_table">
                            <!-- :row-class-name="rowClassName" -->
                            <Table :columns="columns" :data="tableList">
                                <template slot-scope="{ row }" slot="linksblk">
                                    <div>
                                        {{ row.linksblk && Object.values(row.linksblk).length}}
                                    </div>
                                </template>
                                <template slot-scope="{ row }" slot="vmCount">
                                    <div>
                                        {{ row.linkstran && Object.values(row.linkstran).length}}
                                    </div>
                                </template>
                                <template slot="none">
                                    {{0}}
                                </template>
                                <template slot-scope="{ row }" slot="timestamp">
                                    {{formatTime(row.timestamp,'YYYY-MM-dd hh:mm:ss')}}
                                </template>
                            </Table>
                        </div>
                    </div>

                    <!-- 默认展示 手机-->

                    <div class="smart_container_tableList_phone" v-if="isShowDefalutTable">
                        <div class="smart_main" >
                            <div class="main_flex" v-for="item in tableList" :key="item.height">
                                <div class="flex">
                                    <span class="label" :class= "$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">{{$setI18n('lang_br_blockHeigh','块高度')}}</span>
                                    <span class="cont">{{ item.height }}</span>
                                </div>
                                <div class="flex">
                                    <span class="label" :class= "$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''" >{{$setI18n('lang_br_hash','哈希值')}}</span>
                                    <span class="gray cont" v-clipboard:copy="item.hash" v-clipboard:success="onCopySuccess" >{{ item.hash && item.hash.substring(0,10) + '...' + item.hash && item.hash.substring(item.hash.length-10)}} </span>
                                </div>

                                <div class="flex">
                                    <span class="label" :class= "$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">{{$setI18n('lang_br_transactionNumber','交易笔数')}}</span>
                                    <span class="cont">{{item.linkstran && Object.values(item.linkstran).length}}</span>
                                </div>

                                <div class="flex">
                                    <span class="label" :class= "$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">{{$setI18n('lang_br_blockNumber','分片数')}}</span>
                                    <span class="gray cont">{{ item.linksblk && Object.values(item.linksblk).length}}</span>
                                </div>

                                <div class="flex">
                                    <span class="label" :class= "$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">{{$setI18n('lang_time','时间')}}</span>
                                    <span class="cont ">{{ formatTime(item.timestamp,'YYYY-MM-dd hh:ss:mm') }}</span>
                                </div>
                                <div class="flex">
                                    <span class="label" :class= "$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">{{$setI18n('lang_br_broadcasts','播报方')}}</span>
                                    <span class="cont gray" v-clipboard:copy="item.Address" v-clipboard:success="onCopySuccess">{{ item.Address && item.Address.substring(0,20) + '...' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>

            <div class="max_width pages 1" v-if="isShowDefalutTable">
                <!-- show-elevator -->

                <Page :total="totalPage" :current="nowIndex" @on-change="handleChange" :prev-text="$setI18n('lang_br_prev','上一页')" :next-text="$setI18n('lang_br_next','下一页')" />

            </div>

            <div class="max_width pages 2" v-if="!pageShow && accountTransactionsList && isShowDzTable">
                <Page :total="1000000" @on-change="handleChangeAcount" :prev-text="$setI18n('lang_br_prev','上一页')" :next-text="$setI18n('lang_br_next','下一页')" />
            </div>

            <div class="max_width pages 3" v-if="pageShow && accountList.length >= 11 && isShowDzTable">
                <Page :total="1000000" @on-change="handleChangeMoneyAcount" :prev-text="$setI18n('lang_br_prev','上一页')" :next-text="$setI18n('lang_br_next','下一页')" />
            </div>

            <div class="max_width" v-if="mctxlist == true">
                <div v-if="isSmartxMain==true && mctxlist == true" class="smart_qkMessageBlock_left smart_qkMessageBlock_left_block"> {{$setI18n('lang_br_transactionList','交易列表')}}</div>
            </div>

            <div class="smart_container_qkMessageBlock" v-if="mctxlist == true">
                <!-- 交易列表 -->
                <div class="left smart_container_mc smart_container_pc smart_mctxlist" v-if="mctxlist == true">
                    <Table :row-class-name="rowClassName" :columns="columns1" :data="Object.values(accountTransactionsDetail.linkstran)">
                        <template slot-scope="{ row }" slot="amount">
                            <div>
                                {{row.amount ? (row.amount/exchangeRateRatio): 0}} SAT
                            </div>
                        </template>
                        <template slot-scope="{ row }" slot="timestamp">
                            {{formatTime(row.timestamp,'YYYY-MM-dd hh:mm:ss')}}
                        </template>
                    </Table>
                </div>

                <div class="smart_container_tableList_phone pd20" v-if="mctxlist == true">
                    <div v-if="Object.values(accountTransactionsDetail.linkstran).length == 0" style="text-align: center;margin: 30px">
                        暂无数据
                    </div>
                    <div class="smart_main" v-if="Object.values(accountTransactionsDetail.linkstran).length">
                        <div class="main_flex" v-for="item in Object.values(accountTransactionsDetail.linkstran)" :key="item.hash">
                            <div class="flex">
                                <span class="label">{{$setI18n('lang_hash','交易哈希')}}</span>
                                <span class="cont" @click="selected(item)">{{ item.hash && item.hash.substring(0,20) + '...' }}</span>
                            </div>
                            <div class="flex">
                                <span class="label">{{$setI18n('lang_br_toer','转出方')}}</span>
                                <span class="gray cont" v-clipboard:copy="item.addressOut" v-clipboard:success="onCopySuccess">{{ item.addressOut && item.addressOut.substring(0,20) + '...'}} </span>
                            </div>

                            <div class="flex">
                                <span class="label">{{$setI18n('lang_br_fromer','转入方')}}</span>
                                <span class="cont" v-clipboard:copy="item.addressIn" v-clipboard:success="onCopySuccess">{{item.addressIn && item.addressIn.substring(0,20) + '...'}}</span>
                            </div>

                            <div class="flex">
                                <span class="label">{{$setI18n('lang_value','金额')}}</span>
                                <span class="gray cont ">{{item.amount}}</span>
                            </div>
                            <div class="flex">
                                <span class="label">{{$setI18n('lang_time','时间')}}</span>
                                <span class="cont ">{{ formatTime(item.timestamp,'YYYY-MM-dd hh:ss:mm') }}</span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="max_width" v-if="isShowJyTable && isSmartxMain == false && accountTransactionsDetail">
                <div v-if="isSmartxMain==false" class="smart_qkMessageBlock_left smart_qkMessageBlock_left_block">{{$setI18n('lang_br_transactionDetails','交易详情')}}</div>
            </div>

            <div class="smart_container_qkMessageBlock" v-if="isShowJyTable && isSmartxMain == false && accountTransactionsDetail">
                <div class="left smart_main" v-if="isSmartxMain == false">
                    <!-- <div>交易详情</div> -->
                    <div class="main_flex">
                        <div class="flex">
                            <span class="label">{{ $setI18n('lang_br_transactionHash','交易哈希') }}</span>
                            <span class="cont smart_container_pc">{{ accountTransactionsDetail.hash }}</span>
                            <span class="cont smart_container_tableList_phone">{{ accountTransactionsDetail.hash && accountTransactionsDetail.hash.substring(0,20) + '...' }}</span>
                        </div>
                        <div class="flex gray">
                            <span class="label">{{$setI18n('lang_br_transactionType','交易类型') }}</span>
                            <span class="cont">{{ accountTransactionsDetail.type }}</span>
                        </div>
                        <div class="flex">
                            <span class="label">{{$setI18n('lang_br_nonce','交易序号')}}</span>
                            <span class="cont">{{ accountTransactionsDetail.nonce }}</span>
                        </div>
                        <div class="flex gray">
                            <span class="label">{{$setI18n('lang_br_fromer','转入方')}}</span>
                            <span class="cont smart_container_pc">{{ accountTransactionsDetail.addressIn}}</span>
                            <span class="cont smart_container_tableList_phone">{{ accountTransactionsDetail.addressIn && accountTransactionsDetail.addressIn.substring(0,20) + '...' }}</span>
                        </div>
                        <div class="flex">
                            <span class="label">{{$setI18n('lang_br_toer','转出方')}}</span>
                            <span class="cont smart_container_pc ">{{ accountTransactionsDetail.addressOut }}</span>
                            <span class="cont smart_container_tableList_phone">{{ accountTransactionsDetail.addressOut && accountTransactionsDetail.addressOut.substring(0,20) + '...' }}</span>
                        </div>
                        <div class="flex gray" >
                            <span class="label">{{$setI18n('lang_value','金额')}}</span>
                            <span class="cont" v-if="accountTransactionsDetail.type !='contract'">{{ accountTransactionsDetail.amount }} SAT</span>
                            <span class="cont" v-else>{{accountTransactionsDetail.data &&  accountTransactionsDetail.data.substring(accountTransactionsDetail.data.indexOf('(') + 2,accountTransactionsDetail.data.indexOf(')') - 1).split(',')[accountTransactionsDetail.data.substring(accountTransactionsDetail.data.indexOf('(') + 2,accountTransactionsDetail.data.indexOf(')') - 1).split(',').length-1].substring(1)}} {{accountTransactionsDetail.temp && accountTransactionsDetail.temp[0]}}</span>
                        </div>
                        <div class="flex" >
                            <span class="label">{{$setI18n('lang_br_extend','附加信息')}}</span>
                            <span class="cont">{{ accountTransactionsDetail.data }}</span>
                        </div>
                        <div class="flex gray" >
                            <span class="label">{{$setI18n('lang_br_gas','燃料费')}}</span>
                            <span class="cont">{{ accountTransactionsDetail.gas }} SAT</span>
                        </div>
                        <div class="flex">
                            <span class="label">{{$setI18n('lang_br_blockHeigh','块高度')}}</span>
                            <span class="cont">{{ accountTransactionsDetail && accountTransactionsDetail.height }}</span>
                        </div>
                        <div class="flex gray">
                            <span class="label">{{$setI18n('lang_time','时间')}}</span>
                            <span class="cont">{{ formatTime(accountTransactionsDetail.timestamp,'YYYY-MM-dd hh:ss:mm') }}</span>
                        </div>
                        <div class="flex">
                            <span class="label">{{$setI18n('lang_br_remarks','备注')}}</span>
                            <span class="cont">{{accountTransactionsDetail.remarks}}</span>
                        </div>
                        <div class="flex gray">
                            <span class="label">{{$setI18n('lang_status','状态')}}</span>
                            <span class="cont">{{$setI18n('lang_success','成功')}}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="box" v-if="isStart">
                <div class="cont">
                    <div class="footer">© 2020 SmartX Community.</div>
                    <div>
                        <ul class="social">
                            <li><a target="_blank" href="https://twitter.com/SmartXOne"><i class="iconfont icon-twitter"></i> </a></li>
                            <li><a target="_blank" href="https://www.facebook.com/SmartX.OneOfficial"><i class="iconfont icon-facebook"></i> </a></li>
                            <li><a target="_blank" href="https://github.com/smartx-core"><i class="iconfont icon-github"></i></a></li>
                            <li><a target="_blank" href="https://t.me/smartx_en"><i class="iconfont icon-telegram"></i></a></li>
                            <li><a target="_blank" href="https://medium.com/smartx"><i class="iconfont icon-medium"></i></a></li>
                            <li><a target="_blank" href="https://discord.gg/JymqJyS"><i class="iconfont icon-discord"></i></a></li>
                            <li><a target="_blank" href="mailto:social@smartx.one"><i class="iconfont icon-email"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>

</template>

<script lang="ts">
    import { Vue, Component, Prop, Watch } from "vue-property-decorator";
    import TopNav from './topNav/topNav.vue';
    import i18n from '@/locale';
    import { mapGetters, mapActions } from "vuex";
    import Utils from '@/utils/index';
    import BarChart1Png   from '@/assets/images/public/BarChart1.png';
    import BarChart2Png   from '@/assets/images/public/BarChart2.png';
    import BarChart3Png   from '@/assets/images/public/BarChart3.png';
    import BarChart4Png   from '@/assets/images/public/BarChart4.png';
    import BarChart5Png   from '@/assets/images/public/BarChart5.png';
    import MapPng         from '@/assets/images/public/Map.png';
    import smartxLogoPng  from '@/assets/images/public/smartx-logo.png';
    import { log } from "@/lib/utils";

    @Component({
        components:{
            TopNav
        },
        methods:{
            ...mapActions([
                'globalInfoRequestAction',
                'getLatestBlockRequestAction',
                'getGlobalNodeDistInfoRequestAction',
                'getLatestBlockHeightRequestAction',
                'getAccountTransactionsRequestAction',
                'getAccountTransactionsDetailRequestAction',
                'getbalanceRequestAction',
                'getTXBlockRequestAction',
                'getAccountTransactionsAnotherRequestAction'
            ])
        }
    })
    export default class Generalization extends Vue {
        private getSmartxLogoPng:any     = smartxLogoPng;

        /** 用户输入的地址; */
        private addressParms:String = '';
        /** 图片 */
        private getBarChart1Png = BarChart1Png;
        private getBarChart2Png = BarChart2Png;
        private getBarChart3Png = BarChart3Png;
        private getBarChart4Png = BarChart4Png;
        private getBarChart5Png = BarChart5Png;
        private getMapPng       = MapPng;

        /** 获取的概览的字段 */
        private topList:Object = {};
        /** 当前主块 */
        private currentBlock: any = null;
        /** 最近出块 */
        private tableList:Array<object> = [];
        /** 节点分布 */
        private nodeDistInfoList:Array<object> = [];
        /** 交易信息 */
        private accountTransactionsDetail:any = null;
        /** 查询地址 */
        private accountTransactionsList:any = null;
        /** 代币交易 */
        private accountList:Array<object> = [];
        /** 账户余额 */
        private money:any = null;
        /** 当前选中的区块 */
        private selectIndex:any = null;
        /** 是否显示默认列表 */
        private isShowDefalutTable:boolean = false;
        /** 是否显示交易列表 */
        private isShowJyTable:boolean = false;
        /** 是否显示代币交易分页 */
        private pageShow:boolean = false;
        /** 是否显示地址列表 */
        private isShowDzTable:boolean = false;
        private exchangeRateRatio: any = 1;
        /** 判断返回的btype类型是main还是txs */
        private isSmartxMain: boolean = false;

        private mctxlist: boolean = false;

        private titleBar: string = '';
        /** 头部筛选下拉框 */
        private selectAll:Array<object> = [];

        /** 最近出块 */
        private totalPage: any = null;
        private name1: string = 'name1';
        private name:string = 'name1';
        private columns:Array<object> = []

        /** 主块交易 */
        private columns1:Array<object> = []

        /** 普通交易 */
        private columns2:Array<object> = []

        /** 代币交易 */
        private columns3:Array<object> = []
        private columns3_phone:Array<object> = []

        /** 改变 */
        private isStart:boolean = false;
        private nowIndex:number = 1;

        /** 拷贝成功 */
        private onCopySuccess():void{
            this.$Message.success('复制成功');
        }

        /** 初始化函数 */
        private mounted():void
        {
            let _index=Utils['getUrlParam']('index');
            this.nowIndex = parseInt(_index) || 1;
            console.log("this.nowIndex = "+this.nowIndex)
            this.changeLangEvent();
            (async()=>{
                /** 基础的一些数据 */
                this.topList   =  await this['globalInfoRequestAction']();
                console.log("toplist=");
                console.log(this.topList);
                /** 最近出块 */
                let _res =  await this['getLatestBlockRequestAction'](this.nowIndex);
                this.isStart=true;
                if(_res){
                    console.log("初始化_res=");
                    console.log(_res);
                    this.tableList = _res;
                    this.totalPage = _res[0] && _res[0].height + 1
                    console.log(this.totalPage)
                    this.isShowDefalutTable = true;
                }
            })();
        }

        private changeLangEvent():void
        {
            console.log(this.titleBar, '-----titleBar')
            if(this.titleBar == '账户信息' || this.titleBar == 'Account info'){
                this.titleBar = this['$setI18n']('lang_br_accountInfo','账户信息');
            }else if(this.titleBar == '交易信息' || this.titleBar == 'Transaction info'){
                this.titleBar = this['$setI18n']('lang_br_transactionInfo','交易信息');
            }else {
                this.titleBar = this['$setI18n']('lang_br_LastBlock','最新出块');
            }
            this.selectAll = [{
                text: this['$setI18n']('lang_br_allScreening','全部筛选'),
                index: 0,
                state: 1
            },{
                text: this['$setI18n']('lang_br_address','地址'),
                index: 1,
                state: 0
            },{
                text: this['$setI18n']('lang_br_transaction','交易'),
                index: 2,
                state: 0
            }];
            this.columns1 = [
                {
                    title: this['$setI18n']('lang_hash','交易哈希'),
                    key: 'hash',
                    tooltip: true,
                },
                {
                    title: this['$setI18n']('lang_br_toer','转出方'),
                    key: 'addressOut',
                    tooltip: true,
                },
                {
                    title: this['$setI18n']('lang_br_fromer','转入方'),
                    key: 'addressIn',
                    tooltip: true,
                },
                {
                    title: this['$setI18n']('lang_value','金额'),
                    slot: 'amount'
                },
                {
                    title: this['$setI18n']('lang_time','时间'),
                    slot: 'timestamp'
                },
                {
                    title: '操作',
                    key: 'state',
                    fixed: 'right',
                    width: 120,
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.selected(params.row)
                                    }
                                }
                            }, '详情'),

                        ]);
                    }
                }
            ]
            this.columns2 = [
                {
                    title: this['$setI18n']('lang_hash','交易哈希'),
                    slot: 'hash',
                    // tooltip: true,
                },
                {
                    title: this['$setI18n']('lang_value','金额'),
                    // width: 140,
                    slot: 'amount'
                },
                {
                    title: this['$setI18n']('lang_br_transactionType','交易类型'),
                    width: 120,
                    slot: 'type'
                }
            ]
            this.columns3 = [
                {
                    title: this['$setI18n']('lang_hash','交易哈希'),
                    slot: 'hash'
                },
                {
                    title: this['$setI18n']('lang_value','金额'),
                    // width: 120,
                    slot: 'amount'
                },
                {
                    title: this['$setI18n']('lang_value_name','代币名'),
                    width: 90,
                    slot: 'name'
                },
                {
                    title: this['$setI18n']('lang_br_transactionType','交易类型'),
                    width: 120,
                    slot: 'type'
                }
            ]
            this.columns3_phone = [
                {
                    title: this['$setI18n']('lang_hash','交易哈希'),
                    slot: 'hash'
                },
                {
                    title: this['$setI18n']('lang_value','金额'),
                    slot: 'amount'
                },
                {
                    title: this['$setI18n']('lang_value_name','代币名'),
                    slot: 'name'
                },
                {
                    title: this['$setI18n']('lang_br_transactionType','交易类型'),
                    slot: 'type'
                }
            ]
            this.columns = [
                {
                    title: this['$setI18n']('lang_br_blockHeigh','块高度'),
                    width: 100,
                    key: 'height'
                },
                {
                    title: this['$setI18n']('lang_br_hash','哈希值'),
                    key: 'hash',
                    tooltip: true,
                },
                {
                    title: this['$setI18n']('lang_br_transactionNumber','交易笔数'),
                    width: 160,
                    slot: 'vmCount'
                },
                {
                    title: this['$setI18n']('lang_br_blockNumber','分片数'),
                    width: 120,
                    slot: 'linksblk'
                },
                {
                    title: this['$setI18n']('lang_time','时间'),
                    width: 200,
                    slot: 'timestamp'
                },
                {
                    title: this['$setI18n']('lang_br_broadcasts','播报方'),
                    // width: 260,
                    key: 'Address',
                    tooltip: true
                }
            ]
        }

        /** 搜索 */
        private async handleSearch():Promise<any>
        {
            if (this.addressParms == '') {
                this.$Message.warning('Please input anything!');
                return;
            }
            let _select = this.selectAll.filter(_item=> _item['state'] == 1);
            this.selectIndex = _select[0]['index'];
            console.log("select="+this.selectIndex);
            //alert(this.selectIndex);

            if (this.selectIndex == 0) {
                /** 获取全网高度 */
                let _height = await this['getLatestBlockHeightRequestAction']();
                console.log("height=" + _height);
                try {
                    //先查主块
                    // 请求主块失败抛出异常
                    this.accountTransactionsDetail = await this['getAccountTransactionsDetailRequestAction'](this.addressParms);
                    window.location.href='browser2/McMainBlockInformation?blockhash='+this.addressParms;
                    this.mctxlist = false;
                    this.isSmartxMain = false;
                    this.isShowJyTable = true;      // 显示单个主块css显示
                    this.isShowDzTable = false;   // 控制账户显示
                    this.isShowDefalutTable = false;// 显示所有主块css显示
                    this.titleBar = this['$setI18n']('lang_br_transactionInfo', '交易信息');
                    this.currentBlock = this.accountTransactionsDetail && this.accountTransactionsDetail.height
                    console.log("主块查询this.accountTransactionsDetail=");
                    console.log(this.accountTransactionsDetail);
                    /** 判断btype是否为main类型，还是Txs类型 */
                    if (this.accountTransactionsDetail) //&& this.accountTransactionsDetail.btype
                    {
                        // this.isSmartxMain = this.accountTransactionsDetail.btype == 'SMARTX_MAIN' ? true : false;
                        this.isSmartxMain = true;
                    }

                    this.mctxlist = true;

                } catch (err) {
                    //如果主块查不到 查交易块
                    try {

                        let res = await this['getTXBlockRequestAction'](this.addressParms);
                        window.location.href='browser2/TransactionDetails?hash='+this.addressParms;
                        let _res=res;
                        console.log("交易_res=");
                        console.log(_res);
                        this.accountTransactionsDetail = _res;
                        this.currentBlock = _res && _res.height
                        this.isShowDzTable = false;
                        this.mctxlist = false;
                        this.isSmartxMain = false;
                        this.isShowDefalutTable = false;//有了这个测试网的查合约交易的时候就不会显示主表了
                        this.isShowJyTable = true;      // 控制单个主块css显示

                    } catch (err) {
                        // 查账户
                        let res = await this['getAccountTransactionsRequestAction']({
                            height: 0,
                            address: this.addressParms,
                            index: 0,
                        });
                        this.isStart=false;
                        window.location.href='browser2/AddressInformation?address='+this.addressParms;
                        let _res=res;
                        console.log("账户_res=");
                        console.log(_res);

                        this.currentBlock = _res && _res[0].height;
                        if (this.name == "name2" && this.isShowDzTable == true) {
                            this.handleChangeMoneyAcount(1)
                        }
                        this.mctxlist = false;
                        this.isShowJyTable = false;
                        this.isShowDefalutTable = false;
                        this.isShowDzTable = true;      // 控制账户
                        this.isSmartxMain = false
                        this.titleBar = this['$setI18n']('lang_br_accountInfo', '账户信息')
                        let _money = await this['getbalanceRequestAction'](this.addressParms);

                        if (_money) {
                            this.money = _money.available / this.exchangeRateRatio
                        } else {
                            this.money = '--';
                        }

                        if (_res) {
                            this.accountTransactionsList = _res;
                        }
                    }
                }
            }
            else {
                // 这里是账户查询了 因为主块和交易都查不到
                /** 如果选中的是地址查询 */
                if (this.selectIndex == 1) {
                    /** 获取全网高度 */
                    let _height = await this['getLatestBlockHeightRequestAction']();

                    let _res =  await this['getAccountTransactionsRequestAction']({
                        height: _height,
                        address: this.addressParms,
                        index: 0,
                    });
                    this.mctxlist = false;
                    this.isShowJyTable = false;
                    this.isShowDzTable = true;
                    this.isShowDefalutTable = false
                    if (_res) {
                        this.accountTransactionsList = _res.transactionList;
                    }

                    /** 如果选中的是交易查询 */
                } else if (this.selectIndex == 2) {
                    let _res = await this['getTXBlockRequestAction'](this.addressParms);
                    this.accountTransactionsDetail = _res;
                    this.currentBlock = _res && _res.height
                    this.isSmartxMain = false;
                    this.mctxlist = false;
                    this.isShowJyTable = true;      // 控制单个主块css显示
                    this.isShowDzTable = false;
                }
            }
        }

        /** 跳到对应的钱包地址 */
        private handleGotoAddressInfor(): void
        {
            this.$router.push({ path: '/browser/addressInformation', query:{ 'address': String(this.addressParms)}});
        }

        /** 分页查询 */
        private handleChange(index) {
            console.log(index);
            (async () => {
                /** 最近出块 */
                let _res = await this["getLatestBlockRequestAction"](index);
                console.log("index="+index)
                window.location.href = 'browser2?index='+(index).toString();
                if (_res) {
                    // this.totalPage = parseInt(_res.pages) * parseInt(_res.mcBlockCount);
                    // this.isShowDefalutTable = true;
                    console.log("初始化_res=");
                    console.log(_res);
                    if(_res.ret == "failed"){
                        this.$Message['error']({
                            content: _res.ret || 'failed'
                        });
                    }else{
                        this.tableList = _res;
                        this.isShowDefalutTable = true;
                    }
                }
            })();
        }

        /** 账户 分页查询 */
        private handleChangeAcount(index) {
            console.log(index);
            (async () => {

                /** 获取全网高度 */
                    // let _height = await this['getLatestBlockHeightRequestAction']();

                let _res =  await this['getAccountTransactionsRequestAction']({
                        height: 0,
                        address: this.addressParms,
                        index: index - 1,
                    });
                console.log(_res, _res.transactionList)
                if (_res) {
                    this.accountTransactionsList = _res;
                    this.pageShow = false
                    this.currentBlock = _res && _res[0].height
                }
            })();
        }

        /** 代币交易 分页查询 */
        private handleChangeMoneyAcount(index) {
            console.log(index);
            (async () => {

                let _res =  await this['getAccountTransactionsAnotherRequestAction']({
                    address: this.addressParms,
                    index: index - 1,
                });
                console.log(_res)
                if (_res) {
                    this.accountList = _res;
                    this.pageShow = true
                    this.currentBlock = _res[0] && _res[0].height
                }
            })();
        }

        private changeTabs(name) {
            console.log(name)
            if(name == 'name2'){
                this.name = 'name2';
                this.handleChangeMoneyAcount(1)
            }else{
                this.name = 'name1';
                this.handleChangeAcount(1)
            }

        }

        /** 切换下拉框 */
        private handleClickSelect(_index:number)
        {
            let _emtry:Array<object> = [];
            this.selectAll.forEach(_item=>{
                if (_index == _item['index']) {
                    _item['state'] = 1;
                } else {
                    _item['state'] = 0;
                }
            });
            this.selectAll = _emtry.concat(this.selectAll);
            console.log(this.selectAll);
        }

        private rowClassName (row, index)
        {
            if ((index)%8 === 0) {
                return 'table-row-blue';
            } else if ((index)%8 === 2) {
                return 'table-row-green';
            } else if ((index)%8 === 4) {
                return 'table-row-red';
            } else if ((index)%8 === 6) {
                return 'table-row-yellow';
            }
            return '';
        }

        private formatTime(_time, _format)
        {
            //console.log(Utils['formatTime'](new Date(parseInt(_time)), _format));
            var d = new Date();
            // var offset = d.getTimezoneOffset() * 60000;
            // _time = _time + offset;
            return Utils['formatTime'](new Date(parseInt(_time)), _format);
        }
        private async selected(item) {
            let _res = await this["getTXBlockRequestAction"](item.hash);
            if(_res=="false")
            {
                return;
            }
            this.mctxlist = false;
            this.isSmartxMain = false;
            this.isShowJyTable = true; // 控制单个主块css显示
            this.addressParms = item.hash

            this.isShowDzTable = false;
            this.titleBar = this['$setI18n']('lang_br_transactionInfo','交易信息');


            this.accountTransactionsDetail = _res;
            this.currentBlock = _res && _res.height
        }
        private async initData(page) {
            /** 最近出块 */
            let _res =  await this['getLatestBlockRequestAction']();
            if(_res){
                console.log("初始化_res=");
                console.log(_res);
                if(_res.ret == "failed"){
                    this.$Message['error']({
                        content: _res.ret || 'failed'
                    });
                }else{
                    this.tableList = _res;
                    this.isShowDefalutTable = true;
                }
            }
        }
    }

</script>

<style lang="scss">
    @import 'generalization';
</style>
